<template>
  <div class="home">
    <el-container>
      <el-header>
        <div class="l">
          <div>
            <img src="../assets/后台管理图片/111.jpg" alt="" />
          </div>
          <div class="zi" style="color: #fff">电商后台管理系统</div>
        </div>
        <div class="r">
          <el-button type="info" size="large" @click="tc">退出</el-button>
        </div>
      </el-header>
      <el-container>
        <el-aside :width="isCollapse ? '65px' : '200px'">
          <el-menu
            active-text-color="#ffd04b"
            background-color="#545c64"
            class="el-menu-vertical-demo"
            :default-active="$route.path"
            text-color="#fff"
            :unique-opened="true"
            router
            :collapse="isCollapse"
            :collapse-transition="false"
          >
            <header
              @click="isCollapse = !isCollapse"
              style="color: #fff"
              class="tou"
            >
              |||
            </header>
            <el-sub-menu
              :index="index + ''"
              v-for="(item, index) in allList"
              :key="index"
            >
              <template #title>
                <svg class="icon" aria-hidden="true">
                  <use :xlink:href="`#icon-${arr[index]}`"></use>
                </svg>
                <span>{{ item.authName }}</span>
              </template>
              <el-menu-item
                :index="'/' + ite.path"
                v-for="(ite, ind) in item.children"
                :key="ind"
              >
                <el-icon><grid /></el-icon>
                <span>{{ ite.authName }}</span>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-aside>
        <el-main>
          <router-view></router-view>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>

<script>
import { toRefs, reactive, onMounted } from "vue";
import { zuolist } from "../http/api.js";
import { useRouter } from "vue-router";
import { ElMessage, ElMessageBox } from "element-plus";
export default {
  setup(props) {
    const router = useRouter();
    const obj = reactive({
      allList: [],
      isCollapse: false,
      arr: [
        "gerenzhongxin-m",
        "shuju-m",
        "a-dingdanzhangdan-m",
        "shezhi-m",
        "shangcheng-m",
      ], //用于控制图标的数组
    });
    // 挂载
    onMounted(() => {
      getuzuolist();
    });
    // 渲染左侧数据
    let getuzuolist = async () => {
      const res = await zuolist();
      console.log("左侧所有数据", res);
      obj.allList = res;
    };
    // 退出功能
    const tc = () => {
      ElMessageBox.confirm("您确定要退出吗?", "Warning", {
        confirmButtonText: "OK",
        cancelButtonText: "Cancel",
        type: "warning",
      })
        .then(() => {
          sessionStorage.removeItem("token");
          router.push("/login");
          ElMessage({
            type: "success",
            message: "退出成功",
          });
        })
        .catch(() => {
          ElMessage({
            type: "info",
            message: "已取消退出",
          });
        });
    };

    return {
      ...toRefs(obj),
      tc,
    };
  },
};
</script>

<style lang="scss" scoped>
.home {
  width: 100%;
  height: 100%;
  .el-container {
    width: 100%;
    .el-header {
      width: 100%;
      height: 60px;
      background-color: #373d41;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      padding: 0 15px;
      align-items: center;
      .l {
        width: 50%;
        box-sizing: border-box;
        display: flex;
        img {
          width: 60px;
          height: 60px;
        }
        .zi {
          font-size: 22px;
          color: #fff;
          margin-left: 15px;
          line-height: 60px;
        }
      }
      .r {
        width: 5%;
      }
    }
    .el-aside {
      min-height: 660px;
      background-color: #333744;
      box-sizing: border-box;
      .tou {
        width: 100%;
        text-align: center;
      }
      .el-menu {
        border-right: 0;
      }
    }
  }
}
</style>
